<template>
	<view class="pd16_15">
		<view v-if="isNeedPay">
			<view class="box" style="white-space: nowrap;">
				<view class="delivery-type bd-bottom">
					<sub-tab :tabs="tabs" :selectIndex="deliveryType" @change="changeType"></sub-tab>
				</view>
				<view v-if="deliveryType == 1">
					<select-address :addrs="addrs" v-model="address_id"></select-address>
				</view>
				<view class="search">
					<text >提货人</text>
					<view>
						<input type="text" v-model="cartList.user_address.name" placeholder="请填写姓名"  >
					</view>
				</view>
				<view class="search">
					<text >电话</text>
					<view>
						<input type="number" maxlength="11" v-model="cartList.user_address.mobile" placeholder="请填写电话">
					</view>
				</view>
				<view v-if="deliveryType == 0">
					<view @click="showAct" class="pd16_15 flex alcenter">
						<view style="width: calc(100% - 40rpx);" class="flex">
							<text class="iconfont iconicon_location02 ft18" style="color: #01B750;display: flex;align-items: center;"></text>
							<view class="pl10" style="width: calc(100% - 40rpx);">
								<view v-if="!cartList.bus.nickname" class="ft14 cl-main ftw600">选择门店</view>
								<view v-if="cartList.bus.nickname" class="ft14 cl-main ftw600">
									【{{cartList.bus.nickname}}】 
								</view>
								<view @click.stop="dianhua(cartList.bus.phone)"
								style="padding: 10rpx 10rpx;color: black;font-size: 29rpx;">电话:{{cartList.bus.phone}}</view>
								<view v-if="cartList.bus.address" class="ft12 mt8 cl-info2">{{cartList.bus.address}}
								</view>
							</view>
						</view>
						<text class="iconfont iconicon_arrow_small ft14 cl-notice"></text>
					</view>
				</view>
			</view>
			
			<view class="box mt16 pd16_15">
				<view class="ft16 ftw600 cl-main">支付方式</view>
				<view class="bd-line mt16"></view>
				<radio-group @change="changePayType">
					<!-- <view class="pt16 pb16 flex alcenter space">
						<view class="flex alcenter">
							<text class="iconfont iconicon_pay_balance ft32" style="color: #01B750;"></text>
							<text class="ml15 ft14 ftw500 cl-main">余额支付</text>
							<text v-if="userinfo.money==0" class="ml10 ft12 cl-notice">余额为{{userinfo.money}}，不可用</text>
							<text v-if="userinfo.money>0" class="ml10 ft12 cl-notice">当前余额￥{{userinfo.money}}</text>
						</view>
						<view>
							<radio value="money" :checked="payType ==  'money'" color="#01B750" />
						</view>
					</view>
					<view class="bd-line"></view> -->
					<view class="pt16  flex alcenter space">
						<view class="flex alcenter">
							<text class="yticon icon-iconfontweixin ft32 cl-green"></text>
							<text class="ml15 ft14 ftw500 cl-main">微信支付</text>
						</view>
						<view>
							<radio value="weixin" :checked="payType ==  'weixin'" :color="tempColor" />
						</view>
					</view>
				</radio-group>
			</view>
			<view class=" box pd16_15 mt16">
				<view class="flex alcenter space">
					<text class="ft14 cl-main">订单价格</text>
					<view class="cl-orange">
						<text class="ft12">¥</text>
						<text class="ft20">{{totaly}}</text>
					</view>
				</view>
				<!-- <view class="bd-line mt16 mb16"></view> -->
				<!-- <view class="c-row b-b" @click="yhq(total)">
					<text class="tit ft14 cl-main">优惠券抵扣</text>
					<text class="yticon icon-you" style="float: right;"></text>
					<text v-if="CouponData.price>0" class="con t-r red ft14 cl-orange" style="float: right; margin-right: 20upx;">￥{{CouponData.price}}</text>
					<text v-if="!CouponData.price" class="con t-r red ft12 cl-orange" style="float: right; margin-right: 20upx;">你有优惠券可抵扣</text>
				</view> -->
				<view v-if="deliveryType==1" class="bd-line mt16 mb16"></view>
				<view v-if="deliveryType==1" class="flex alcenter space">
					<text class="ft14 cl-main">运费</text>
					<view class="cl-orange">
						<text class="ft12">¥</text>
						<text class="ft20">{{yfei}}</text>
					</view>
				</view>
				<!-- <view class="bd-line mt16 mb16"></view>
				<view  class="flex alcenter space">
					<text class="ft14 cl-main">还需支付</text>
					<view class="cl-orange">
						<text class="ft12">¥</text>
						<text class="ft20">{{total}}</text>
					</view>
				</view> -->
			</view>
			<block v-for="(item, index) in cartList.goods" :key="index">
				<view class="box pd16_15 flex alcenter mt16" @click="detail(item.sku_id)">
					<image class="integral-tuan-l" mode="aspectFill" :src="item.img"></image>
					<view class="pl15" style="width: calc(100% - 200rpx);">
						<view class="ft14 cl-main ftw600 text-over2">{{item.title}}</view>
						<view class="flex alcenter space mt12 cl-notice">
							<view class="flex alcenter">
								<text class="ft12">单价：</text>
								<text class="ft12">¥{{item.money}}</text>
							</view>
							<view class="flex alcenter">
								<text class="ft12">数量</text>
								<text class="ft12">{{item.num}}</text>
							</view>
						</view>
						<view class="mt12 flex alend space">
							<view class="flex alcenter">

								<text class="ft16 cl-orange ftw600">小计：¥{{accMul(item.money,item.num)}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="form-footer-h">
				<view class="form-footer form-footer-h">
					<view class="form-footer-main pd10_15">
						<button @click="pay()" class="btn-big"
							:style="'background: '+buttonbackground+'; color: #FFFFFF;'">支付 ¥{{cartList.money.money}}</button>
					</view>
				</view>
			</view>
		</view>
		<view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exchangeType: 3, // 1套餐 2优惠券 3实物
				tabs: ['门店自提' ],
				deliveryType: 0,
				payType: 'weixin',
				isNeedPay: true,
				address_id: 0, //接口下发默认地址，如果没有就是0
				mendian_id: 0, //接口下发默认门店，如果没有就是0
				id: 0,
				total: 0, //折扣后总价格
				totaly: 0, //原总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: {
					bus:{}
				},
				isyh: false,
				buttonbackground: '#01B750',
				addrs: [],
				mendian: [],
				getSelectItem: [],
				st: 0,
				userinfo: [],
				styhq: 0,
				yfei: 0,
				oid: 0,
				CouponData: [], 
			}
		},
		onLoad(option) {
			if (option.id>0) {
				this.id = option.id
				 
			}  else {
				this.$ajax('post', 'Orders/index', {
					sku_data: option.data
				}).then(res => {
					res.data.goods.forEach(item => {
						item.checked = true
					})
					this.cartList = res.data;
					this.calcTotal()
				})
			}
			this.mendian_id = this.mendianSelectId; // 返回之前选择的默认门店ID
		},
		onShow() {
			if (this.st == 1 && this.deliveryType == 0) {
				this.st = 0
				this.getSelectItem = this.mendian
			}
			this.cartList.bus = uni.getStorageSync("mendian")
		},
		methods: {
			 dianhua(e){
				 uni.makePhoneCall({
				 	phoneNumber:e  
				 });
			 },
			info() {
				let this_ = this
				let data = {};
				data.id = this.id
				if (uni.getStorageSync("token")) {
					data.token = uni.getStorageSync("token");
					this.isLogin = true
				}
				uni.request({
					url: this.configs.webUrl + '/api/shop/gwc',
					data: data,
					success: data => {
						//console.log(data.data.rows)
						//this.loadData(data.data.rows);
						//this.setTabBarBadges(data.data.gwccount)
					},
					fail: (data, code) => {}
				});
			},
			yhq(total) {
				this.styhq = 1
				uni.removeStorageSync('CouponData');
				uni.navigateTo({
					url: '/pages/client/shop/coupon?total=' + total
				})
			},
			showAct() {
				this.st = 1
				uni.navigateTo({
					url: '/pages/client/mendian?tp=1'
				})
			},
			/**
			 ** 乘法函数，用来得到精确的乘法结果
			 ** 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
			 ** 调用：accMul(arg1,arg2)
			 ** 返回值：arg1乘以 arg2的精确结果
			 **/
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
			  m += s2.split(".")[1].length;
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
			},
			//计算总价
			calcTotal() {
				let list = this.cartList.goods;
				if (list.length === 0) {
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item => {
					if (item.checked === true) {
						total += item.money * item.num;
						console.log(total)
					} else if (checked === true) {
						checked = false;
					}
				})
				this.allChecked = checked;
				this.totaly = Number(total.toFixed(2));
				// 优惠券
				// if(this.CouponData.price){
				// 	total=total-this.CouponData.price*1
				// }
				this.total = Number(total.toFixed(2));
			},
			changePayType(e) {
				console.log(e.detail.value)
				this.payType = e.detail.value;
				if (e.detail.value == 'weixin') {
					this.buttonbackground = '#00c657'
				} else if (e.detail.value == 'alipay') {
					this.buttonbackground = '#FFBD1E'
				} else {
					this.buttonbackground = '#01B750'
				}
			},
			changeType(e) {
				if (e == 0) {
					this.yfei = this.userinfo.ztyf
				} else {
					this.yfei = this.userinfo.kdyf
				}
				this.deliveryType = e;
			},
			pay() {
				// console.log('发货类型 0自提 1快递')
				// console.log(this.deliveryType)

				// console.log('门店地址')
				// console.log(this.getSelectItem)

				// console.log('快递地址id')
				// console.log(this.address_id)
				// console.log('优惠券数据')
				// console.log(this.CouponData)
				// console.log('商品数据')
				// console.log(this.cartList)
				// console.log('支付方式')
				// console.log(this.payType)
				let data = {
					info: JSON.stringify(this.cartList)
				};
				data.token = uni.getStorageSync("token");
				if (this.deliveryType == 0) {
					if (!this.cartList.bus.nickname) {
						uni.showToast({
							title: '请选择自提门店',
							icon: "none"
						});
						return false;
					}
					if (!this.cartList.user_address.name) {
						uni.showToast({
							title: '请填写提货人姓名',
							icon: "none"
						});
						return false;
					}
					if (!this.cartList.user_address.mobile) {
						uni.showToast({
							title: '请填写提货电话',
							icon: "none"
						});
						return false;
					}

				} else {
					if (!this.cartList.user_address.name) {
						uni.showToast({
							title: '请选择地址',
							icon: "none"
						});
						return false;
					}
					data.address_id = this.address_id
					data.lx = 2
				}

				if (this.cartList.goods.length == 0) {
					uni.showToast({
						title: '商品数据不对',
						icon: "none"
					});
					return false;
				}


				// uni.showToast({ title:'订单正在开发..',icon:"none" });
				// return false;
				this.paypost(data)
			},
			paypost(data) {
				console.log(11)
				let sku = []
				this.cartList.goods.forEach(item=>{
					sku.push({sku_id:item.sku_id})
				})
				if (uni.getStorageSync("token")) {
					data.token = uni.getStorageSync("token");
					this.isLogin = true
				}
				this.$ajax('post','Orders/add',{
				 sku_data:JSON.stringify(sku),
				 user_phone:this.cartList.user_address.mobile,
				 user_name:this.cartList.user_address.name
				}).then(res=>{
					if(res.code==1){
						
						this.$ajax('post','wechat_pay/index',{
						 order_id: res.data.order_id
						}).then(k=>{
							 uni.requestPayment({
							 	provider: 'wxpay',
							 	timeStamp: String(k.data.timeStamp),
							 	nonceStr: k.data.nonceStr,
							 	package: k.data.package,
							 	signType: k.data.signType,
							 	paySign: k.data.paySign,
							 	success: (g) =>{
							 		that.$api.msg('支付成功！')
							 		setTimeout(()=>{
							 			uni.navigateTo({
							 				url:'/pages/order/order?id=2'
							 			})
							 		},800)
							 	},
							 	fail: function(err) {
							 		uni.showModal({
							 			title: '支付失败',
							 			content: '请稍后再试~',
							 			success: function(res) {
							 				if (res.confirm) {
							 					uni.navigateBack({
							 						delta: 1
							 					})
							 				} else if (res.cancel) {
							 
							 				}
							 			}
							 		});
							 	}
							 })
						})
					}
				})
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/client/shop/product?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.search{
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		z-index: 3;
		>view{
			width: 81%;
			background: #F7F7F7;
			height: 80rpx;
			border-radius:40rpx ;
			margin-left: 20rpx;
			input{
				width: 100%;
				height: 100%;
				padding-left: 20rpx;
				font-size: 32rpx;
			}
		}
		>text{
			background: #01B750;
			width: 19%;
			height: 60rpx;
			text-align: center;
			align-items: center;
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			border-radius: 30rpx;
			color: #fff;
			padding: 0 10rpx;
		}
	}
	.integral-tuan-l {
		width: 200rpx;
		height: 200rpx;
		background: #f2f2f2;
		border-radius: 10upx;
	}

	.delivery-type {
		height: 102rpx;
	}
</style>
